import {
  ProForm,
  ProFormInstance,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from '@/components/Pro';
import { sysOrgControllerEdit as OragEdit } from '@/services/ess/sysOrg';
import { message, Space } from 'antd';
import { useEffect, useRef } from 'react';
import { useIntl } from 'umi';
type FieldType = {
  baseInfo: {
    orgId?: string;
    orgName?: string;
    orgNo?: string;
    parentId?: number;
    remark?: string;
  };
  handleBaseInfo: (res: any) => void;
};

const App: React.FC<FieldType> = (props) => {
  const intl = useIntl();
  const { baseInfo, handleBaseInfo, fliterTreeData } = props;
  const FormRef = useRef<ProFormInstance>();
  useEffect(() => {
    if (baseInfo) {
      if (baseInfo.parentId === 1) {
        baseInfo.parentId = '';
      }
      FormRef?.current?.setFieldsValue({ ...baseInfo });
    } else {
      FormRef?.current?.setFieldsValue({
        orgId: '',
        orgName: '',
        orgNo: '',
        parentId: '',
        remark: '',
      });
    }
  }, [baseInfo]);

  return (
    <div style={{ maxWidth: '600px' }}>
      <ProForm<API.SysOrgForm>
        formRef={FormRef}
        layout="horizontal"
        grid={true}
        labelCol={{
          flex: `0 0 120px`,
        }}
        style={{ marginTop: 20 }}
        submitter={{
          render: (props, doms) => (
            <div style={{ paddingLeft: 120 }}>
              <Space>{doms}</Space>
            </div>
          ),
        }}
        onFinish={async (value) => {
          let reslut = await OragEdit({ ...baseInfo, ...value, parentId: value?.parentId || 1 });
          if (reslut.success) {
            message.success(intl.formatMessage({ id: 'global.modifiedSuccess' }));
            handleBaseInfo(true);
          }
        }}
      >
        <ProFormText
          name="orgName"
          label={intl.formatMessage({
            id: 'systemManagement.organizationalManagementMenu.organizationName',
          })}
          colProps={{
            span: 18,
          }}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'systemManagement.requiredFields.organizationName',
              }),
            },
          ]}
        />
        <ProFormTreeSelect
          name="parentId"
          label={intl.formatMessage({
            id: 'systemManagement.organizationalManagementMenu.superiorOrganization',
          })}
          fieldProps={{
            options: fliterTreeData,
            fieldNames: {
              label: 'name',
              value: 'id',
              children: 'children',
            },
          }}
          colProps={{
            span: 18,
          }}
        />
        <ProFormText
          name="orgNo"
          label={intl.formatMessage({
            id: 'systemManagement.organizationalManagementMenu.organizationalCode',
          })}
          readonly={true}
          colProps={{
            span: 18,
          }}
        />
        <ProFormTextArea
          label={intl.formatMessage({
            id: 'systemManagement.organizationalManagementMenu.remarksDescription',
          })}
          name="remark"
          colProps={{
            span: 24,
          }}
        />
      </ProForm>
    </div>
  );
};

export default App;
